<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="流程选择" width="700px" :height="440" @ok="closeFlowModal">
    <PageWrapper dense contentClass="flex">
      <Tabs type="card" style="width: 100%" @change="tabChange">
        <!--region 1.最近使用-->
        <TabPane key="1">
          <template #tab>
            <span><HistoryOutlined />快捷搜索</span>
          </template>
          <div>
            <a-input-search @search="onSearch" v-model:value="receSearch" placeholder="请输入关键字查询" style="width: 200px;" />
            <a-button type="primary" style="margin-left: 10px" @click="onSearch">查询</a-button>
          </div>
          <div style="margin-top: 5px;overflow: auto;height:353px;border: 1px solid #ccc">
            <ul class="z-org-search" id="zOrgSearch" style="padding: 2px">
              <li v-for="item in receItems" :key="item.id" class="f-user" @click="receItemClick(item)">
                <Checkbox v-model:checked="item.checked" />
                <img class="vben-header-user-dropdown__header" src="https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640">
                <span class="layui-elip f-user-name">{{ item.name }}</span>
                <span class="layui-elip f-user-dept">{{ item.dept }}</span>
              </li>
            </ul>
          </div>
        </TabPane>
        <!--endregion-->

        <!--region 2.层级架构-->
        <TabPane key="2">
          <template #tab>
            <span><ApartmentOutlined />流程分类</span>
          </template>
          <Row>
            <Col :span="12">
              <div style="height: 390px;border: 1px solid #ccc">
                <BasicTree title="#" toolbar search :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
              </div>
            </Col>
            <Col :span="12">
              <div style="border: 1px solid #ccc;height: 390px;margin-left: 5px;overflow: auto">
                <ul class="z-org-tree">

                  <li v-for="item in tierItems" :key="item.id" class="f-user" title="444444444" @click="tierItemClick(item)">
                    <Checkbox v-model:checked="item.checked" />
                    <img class="vben-header-user-dropdown__header" src="https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640">
                    <span class="layui-elip f-user-name">{{ item.name }}</span>
                    <span class="layui-elip f-user-dept">{{ item.dept }}</span>
                  </li>
                </ul>
              </div>
            </Col>
          </Row>
        </TabPane>
        <!--endregion-->

        <!--region 4.我的收藏-->
        <TabPane key="3">
          <template #tab>
            <span><HeartOutlined />我的收藏</span>
          </template>
          <div style="height:390px;">
            这个暂不支持，待开发
          </div>

        </TabPane>

        <!--endregion-->
      </Tabs>

    </PageWrapper>


  </BasicModal>
</template>
<script lang="ts" setup>
import { CloseCircleOutlined, ApartmentOutlined, HistoryOutlined, HeartOutlined, TeamOutlined } from "@ant-design/icons-vue";
import { Tabs, TabPane } from "ant-design-vue";
import { Row, Col, Checkbox } from "ant-design-vue";
import { onMounted, reactive, ref, toRaw } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { BasicTree, TreeItem } from "/@/components/Tree";
import { PageWrapper } from "/@/components/Page";
import { defHttp } from "/@/utils/http/axios";

let p_opener = null;//弹框打开者标记

// let p_rece_init_flag = false;//最近使用页签初始化标记
let p_tier_init_flag = false;//层级架构页签初始化标记
let selectedItem={} as any;


// onMounted(() => {
//
// });


//region z.1 弹框代码
const emit = defineEmits(["closeModal", "register"]);
const dialogTop = (window.innerHeight < 650 ? 45 : 100) + "px";

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  await receInit();
  p_opener = data.opener;
  //1.初始化
});

function closeFlowModal() {
  try {
    setModalProps({ confirmLoading: true });
    closeModal();
    const backData = {
      opener: p_opener,
      flow: { id:selectedItem.id,name:selectedItem.name }
    };
    emit("closeModal", backData);
  } finally {
    setModalProps({ confirmLoading: false });
  }
}

//endregion

//region z.2 Tab切换

//endregion


//region x.1 最近使用
const receItems = ref<any[]>([]);
const receSearch = ref("");

async function onSearch() {
  receItems.value = await defHttp.get({ url: "/wf/tem/main/list" , params: { name: receSearch.value } });
}

async function receInit() {
  receItems.value = await defHttp.get({ url: "/wf/tem/main/list" , params: { name: 'all' } });

}


function receItemClick(item) {
  item.checked = !item.checked;
  selectedItem.id=item.id;
  selectedItem.name=item.name;
  for (let i = 0; i < receItems.value.length; i++) {
    if (receItems.value[i].id !== item.id) {
      receItems.value[i].checked = false;
    }
  }
}

//endregion

//region x.2 层级架构
const treeData = ref<TreeItem[]>([]);

async function tierInit() {
  treeData.value = (await defHttp.get({ url: "/wf/tem/cate/tree" })) as unknown as TreeItem[];
}

const tierItems = ref<any[]>([]);

async function handleSelect(keys) {
  if (keys.length > 0) {
    tierItems.value = await defHttp.get({ url: "/wf/tem/main/list", params: { cateid: keys[0] } });
  }
}

function tierItemClick(item) {
  item.checked = !item.checked;
  selectedItem.id=item.id;
  selectedItem.name=item.name;
  for (let i = 0; i < tierItems.value.length; i++) {
    if (tierItems.value[i].id !== item.id) {
      tierItems.value[i].checked = false;
    }
  }
  // closeFlowModal();改成不自动关
}

//endregion

//region x.3 我的收藏

//endregion

async function tabChange(key) {
 if (key === "2") {
    if (!p_tier_init_flag) {
      await tierInit();
      p_tier_init_flag = true;
    }
  }
}




</script>

<style lang="less" scoped>
.layui-elip {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.f-user:before,
.f-user:after {
  content: " ";
  display: table;
}

.f-user:after {
  clear: both;
}

.f-user input, .f-user label {
  float: left;
  margin-top: 14px;
  margin-right: 8px;
}

.f-user img {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 8px;
}


.f-user .f-user-name,
.f-user .f-user-dept {
  display: block;
}

.f-user .f-user-name {
  margin-top: 6px;
}

.f-user .f-user-dept {
  color: #a599b2;
}

/*最近*/
.z-org-recently li {
  width: 33%;
  float: left;
  cursor: pointer;
  padding: 5px;
}

.z-org-recently li:hover {
  background-color: #f7efec;
}

/*搜索查询*/
.z-org-search li {
  /*width: 280px;*/
  width: 50%;
  float: left;
  cursor: pointer;
  padding: 2px;
  //margin: 3px;
}

.z-org-search li:hover {
  background-color: #f7efec;
}

/*!*组织架构树*!*/
.z-org-tree li {
  margin: 3px;
  cursor: pointer;
  padding: 3px;
}

.z-org-tree li:hover {
  background-color: #f7efec;
}
</style>
